﻿@model CTM.Web.Models.View.Report.ReportViewModel
@{
    int totalConversation = Model.TotalConversations;
    int totalFeedback = Model.TotalFeedbacks;
}

<!-- BEGIN CHART SECTION -->
<div class="row">
    <!-- BEGIN CONVERSATION STATUS CHART SECTION -->
    <div class="col-md-4 sortable-holder">
        <div class="alert bg-info sortable-object">
            <h4 class="sortable-handle">Conversation Status<span class="pull-right">Total: @totalConversation</span></h4>
            <div class="row">
                <div class="col-sm-8">
                    <div id="chart-status" style="height: 128px;"></div>
                </div>
                <div class="col-sm-4" style="padding-top: 15px;">
                    <p><span class="label label-success">@Model.ConversationDetails.Sum(c=>c.NoSmilePost) positive</span></p>
                    <p><span class="label label-warning">@Model.ConversationDetails.Sum(c => c.NoNeutralPost) neutral</span></p>
                    <p><span class="label label-danger">@Model.ConversationDetails.Sum(c => c.NoFrownPost) negative</span></p>
                </div>
            </div>
        </div>
    </div>
    <!-- END CONVERSATION STATUS CHART SECTION -->
    <!-- BEGIN CONVERSATION CLASSIFY CHART SECTION -->
    <div class="col-md-4 sortable-holder">
        <div class="alert bg-warning sortable-object">
            <h4 class="sortable-handle">Conversation Classification<span class="pull-right">Total: @totalConversation</span></h4>
            <div class="row">
                <div class="col-sm-8">
                    <div id="chart-classification" style="height: 128px;"></div>
                </div>
                <div class="col-sm-4" style="padding-top: 15px;">
                    <p><span class="label bg-grey-darkgrey">@Model.ConversationDetails.Sum(c => c.NoGoalsPost) goal</span></p>
                    <p><span class="label bg-blue-aqua">@Model.ConversationDetails.Sum(c => c.NoCareerPost) career</span></p>
                    <p><span class="label bg-red-bittersweet">@Model.ConversationDetails.Sum(c => c.NoIndividualPost) individual</span></p>
                </div>
            </div>
        </div>
    </div>
    <!-- END CONVERSATION CLASSIFY CHART SECTION -->
    <!-- BEGIN FEEDBACK CHART SECTION -->
    <div class="col-md-4 sortable-holder">
        <div class="alert bg-danger sortable-object">
            <h4 class="sortable-handle">Feedback<span class="pull-right">Total: @totalFeedback</span></h4>
            <div class="row">
                <div class="col-sm-8">
                    <div id="chart-feedback" style="height: 128px;"></div>
                </div>
                <div class="col-sm-4" style="padding-top: 15px;">
                    <p><span class="label label-success">@Model.FeedbackDetails.Sum(c => c.NoSmilePost) positive</span></p>
                    <p><span class="label label-warning">@Model.FeedbackDetails.Sum(c => c.NoNeutralPost) neutral</span></p>
                    <p><span class="label label-danger">@Model.FeedbackDetails.Sum(c => c.NoFrownPost) negative</span></p>
                </div>
            </div>
        </div>
    </div>
    <!-- END FEEDBACK CHART SECTION -->
</div>
<!-- END CHART SECTION -->
<!-- BEGIN TAB SECTION -->
<div class="panel">
    <ul class="nav nav-tabs">
        <li class="active">
            <a data-toggle="tab" href="#tab-conversations">Conversations</a>
        </li>
        <li class="">
            <a data-toggle="tab" href="#tab-feedback">Feedback</a>
        </li>
    </ul>
    <div class="tab-content">

        <!-- BEGIN CONVERSATION TAB SECTION -->
        <div id="tab-conversations" class="tab-pane fade in active">

            <div class="row">
                <div class="col-md-12">
                    <form class="form-inline" onsubmit="getConversations(event);" id="conversation-filter-form">
                        <input type="hidden" name="Id" value="@Model.Id" />
                        <input type="hidden" name="Year" value="@Model.Year" />
                        
                        <div class="form-group">
                            <select class="form-control" name="PageSize" onchange="$(this).closest('form').submit();">
                                <option value="10">10</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-rbvh btn-success active">
                                    <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                           name="Statuses" value="Smile"> <span class="fa fa-lg fa-smile-o"></span>
                                </label>
                                <label class="btn btn-rbvh btn-warning active">
                                    <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                           name="Statuses" value="Neutral"> <span class="fa fa-lg fa-meh-o"></span>
                                </label>
                                <label class="btn btn-rbvh btn-danger active">
                                    <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                           name="Statuses" value="Frown"> <span class="fa fa-lg fa-frown-o"></span>
                                </label>
                            </div>

                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-rbvh grey-darkgrey active">
                                    <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                           name="Types" value="Goals"> Goal
                                </label>

                                <label class="btn btn-rbvh blue-aqua active">
                                    <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                           name="Types" value="Career"> Career
                                </label>

                                <label class="btn btn-rbvh red-bittersweet active">
                                    <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                           name="Types" value="Individual"> Individual
                                </label>
                            </div>
                        </div>

                        <div class="input-group pull-right">
                            <input type="text" class="form-control" name="Keyword" placeholder="Keyword" />
                            <div class="input-group-btn">
                                <button type="submit" class="btn btn-default">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="table-responsive">
                <div id="conversation-result">
                    @Html.Partial("_Conversation", Model.ConversationDetails)
                </div>
            </div>

        </div>
        <!-- END CONVERSATION TAB SECTION -->
        <!-- BEGIN FEEDBACK TAB SECTION -->
        <div id="tab-feedback" class="tab-pane fade">

            <div class="row">
                <div class="col-md-12">
                    <form class="form-inline" onsubmit="getFeedbacks(event);" id="feedback-filter-form">
                        <input type="hidden" name="Id" value="@Model.Id" />
                        <input type="hidden" name="Year" value="@Model.Year" />
                        
                        <div class="form-group">
                            <select class="form-control" name="PageSize" onchange="$(this).closest('form').submit();">
                                <option value="10">10</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-rbvh btn-success active">
                                    <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                           name="Statuses" value="Smile"> <span class="fa fa-lg fa-smile-o"></span>
                                </label>
                                <label class="btn btn-rbvh btn-warning active">
                                    <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                           name="Statuses" value="Neutral"> <span class="fa fa-lg fa-meh-o"></span>
                                </label>
                                <label class="btn btn-rbvh btn-danger active">
                                    <input type="checkbox" autocomplete="off" checked="checked" onchange="$(this).closest('form').submit();"
                                           name="Statuses" value="Frown"> <span class="fa fa-lg fa-frown-o"></span>
                                </label>
                            </div>
                        </div>

                        <div class="input-group pull-right">
                            <input type="text" class="form-control" name="Keyword" placeholder="Keyword" />
                            <div class="input-group-btn">
                                <button type="submit" class="btn btn-default">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="table-responsive">
                <div id="feedback-result">
                    @Html.Partial("_Feedback", Model.FeedbackDetails)
                </div>
            </div>
        </div>
        <!-- END FEEDBACK TAB SECTION -->
    </div>
</div>
<!-- BEGIN TAB SECTION -->